<template>
    <div style="min-height: 100vh;background: #f5f5f5;overflow:hidden">
        <div class="userMsg">
            <p class="topBar">货物详情<span><img src="@/assets/img/left.png" alt="" @click="backPrev"></span></p>
            <div class="userMessage">
                <span class="userImg"><img :src="data.user_image"></span>
                <p class="userNickName">
                    <span class="nickName">{{data.user_name}}</span>
                    <span class="userId">ID：{{data.user_ID}}</span>
                </p>
                <span class="userTel">
                    <img src="@/assets/img/tel.png" alt="">
                    <span>：{{data.user_phone}}</span>
                </span>
            </div>
        </div>
        <div>
            <ul style="background: #f5f5f5">
                <li v-for="(item,index) in data" :key="index" class="dataList">
                    <div>
                        <p class="goodsNo"><span>{{item.title}}</span><span class="goodsStatus" @click="tolink(item.type)">{{item.typeName}}</span></p>
                        <ul style="margin-bottom: 15px;padding: 0 4vw;">
                            <li v-for="(item1,index1) in item.list" :key="index1" class="orderDetail">
                                <span class="goodsImg"><img :src="item1.img" alt=""></span>
                                <div class="goodsText">
                                    <p class="goodsName">{{item1.name}}</p>
                                    <p class="goodsSpec">{{item1.spec_array}}</p>
                                    <p class="artNo">货号：{{item1.goods_no}}</p>
                                    <span class="goodsNum">X{{item1.number}}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>    
        </div>
    </div>
</template>
<script>
import PullTo from 'vue-pull-to';
import request from "@/request/index.js"
export default {
    components:{
        PullTo
    },
    data(){
        return{
            userMsg:{},
            order_no:'', 
            data:{},
            type:1,
        }
    },
    watch:{

    },
    methods: {
        backPrev(){
            this.$router.go(-1)
        },
        tolink(type){
            this.$router.push({path: '/mentionDetail2?order_no='+this.order_no+'&type='+type});
        }
    },
    mounted(){
        this.order_no=this.$route.query.order_no;
        request.selfOrderDetails(this)
    }
}
</script>
<style scoped lang="scss">
    .dataList{
        margin-top: 15px;
        background: #ffffff;
        .goodsNo{
            line-height: 40px;
            font-size: 14px;
            padding: 0 4vw;
            border-bottom: 1px solid #f5f5f5;
            .goodsStatus{
                color:#1ABC9C;
                float:right;
            }
        }
        .orderDetail{
            margin-top: 15px;
            .goodsImg{
                width: 29%;
                height: 26.68vw;
                display: inline-block;
                img{
                    height: 100%;
                    width: 100%;
                }
            }
            .goodsText{
                width:66%;
                float: right;
                position: relative;
                .goodsName{
                    font-size: 13px;
                    color:#333333;
                    line-height: 18px;
                    overflow: hidden;
                    height: 36px;
                }
                .goodsSpec{
                    font-size: 12px;
                    color: #666666;
                    margin-top: 10px;
                    line-height: 17px;
                    height: 27px;
                }
                .artNo{
                    font-size: 12px;
                    color: #666666;
                    line-height: 17px;
                    margin-top: 10px;
                }
                .goodsNum{
                    color: #1ABC9C;
                    position: absolute;
                    right: 0px;
                    bottom: 10px;
                    font-size: 16px;
                }
            }
        }
        .orderTime{
            border-top: 1px solid #f5f5f5;
            line-height: 34px;
            color: #333333;
            font-size: 12px;
            margin-top: 15px;
        }
    }
    .userMsg{
        background: #1ABC9C;
        color: #ffffff;
        .topBar{
            text-align:center;
            position: relative;
            line-height: 36px;
            padding: 0 4vw;
            vertical-align: middle;
            span{
                display: inline-block;
                position: absolute;
                height: 14px;
                width: 14px;
                left: 4vw;
                vertical-align: middle;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .userMessage{
            padding: 16px 4vw;
            position: relative;
            .userImg{
                width: 50px;
                height: 50px;
                display: inline-block;
                border-radius: 50%;
                overflow: hidden;
                vertical-align: middle;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .userNickName{
                width: 200px;
                display: inline-block;
                vertical-align: middle;
                margin-left: 10px;
                span{
                    line-height: 25px;
                    display: block;
                }
            }
            .userTel{
                width: 150px;
                display: inline-block;
                position: absolute;
                right: 0px;
                bottom: 20px;
                vertical-align: middle;
                img{
                    height: 18px;
                    width: 18px;
                    vertical-align: middle;
                }
                span{
                    font-size: 13px;
                    vertical-align: middle;
                }
            }
        }
    }

</style>


